<template>
	<view class="app">
		<view class="main">
			<view class="head">
				<view class="nav-item" :class="{active: navIndex == 0}" @click="navChange(0)">急发订单</view>
				<view class="nav-item" :class="{active: navIndex == 1}" @click="navChange(1)">集运订单</view>
			</view>
			<view class="content" :style="contentStyle">
				<view class="process-item" v-for="(item, index) in process" :key="index">
					<view class="item" v-for="(itemItem, itemIndex) in item" :key="itemIndex">
						<text class="txt">{{itemItem}}</text>
					</view>
					
					<image class="icon level-left" src="/static/images/direction-left.png" mode="widthFix"></image>
					<image class="icon level-right" src="/static/images/direction-right.png" mode="widthFix"></image>
					<image class="icon vertical" src="/static/images/direction-down.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {flowChartApi} from '@/api/index.js';
	export default {
		data() {
			return {
				navIndex: 0,
				acuteProcess: [],
				focusProcess: [],
			};
		},
		computed: {
			contentStyle() {
				return this.navIndex == 0 ? 'border-top-left-radius: 0;' : 'border-top-right-radius: 0;';
			},
			process() {
				return this.navIndex == 0 ? this.acuteProcess : this.focusProcess;
			}
		},
		async onLoad() {
			await this.flowChartList();
		},
		methods: {
			navChange(index) {
				if (this.navIndex === index) {
					return;
				}
				this.navIndex = index;
			},
			async flowChartList(){
				try{
					
					let response = await flowChartApi();
					if(response.status === 200){
						let result = response.data;
						this.acuteProcess = this.formatHandle(result.center_distri);
						this.focusProcess = this.formatHandle(result.center_trans);
					}
					
				}catch(e){
					console.log(e);
					uni.showToast({title: e.message,icon: 'none'});
				}
			},
			
			formatHandle(list){
				let only = list.length % 2,
					limit = list.length - only;
				let resultList = [];
				for(let i = 0; i < limit / 2; i ++){
					let item = [list[i*2], list[i*2 + 1]];
					resultList.push(item);
				}
				if(only != 0){
					resultList.push([list[limit]]);
				}
				return resultList;
				
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}
	
	.app {
		padding: 80rpx 30rpx 30rpx 30rpx;
		box-sizing: border-box;
		width: 100%;
	}
	
	.main {
		width: 100%;
		border-radius: 20rpx;
		background-color: #EBEBEB;
		
		.head {
			width: 100%;
			height: 66rpx;
			border-radius: 20rpx 20rpx 0 0;
			background-color: #fff;
			position: relative;
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			
			.nav-item {
				flex: 1;
				height: 66rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #EBEBEB;
				font-size: 28rpx;
				color: #666;
				font-weight: 500;
			}
			
			.nav-item:first-child {
				border-radius: 20rpx 0 20rpx 0;
			}
			
			.nav-item:last-child {
				border-radius: 0 20rpx 0 20rpx;
			}
			
			.nav-item.active {
				background: #fff;
				height: 88rpx;
				border-radius: 20rpx;
				box-shadow: -5rpx -15rpx 15rpx 0 rgba(0,0,0,0.06);
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
			}
		}
		
		.content {
			background-color: #fff;
			box-shadow: 2rpx 2rpx 28rpx 0 rgba(0,0,0,0.06);
			box-sizing: border-box;
			border-radius: 20rpx;
			padding: 60rpx 30rpx;
			
			.process-item {
				width: 100%;
				height: 68rpx;
				margin-bottom: 66rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				position: relative;
				
				.item {
					width: 284rpx;
					height: 68rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #F0F0F0;
					border-radius: 12rpx;
					padding: 0 20rpx;
					box-sizing: border-box;
					.txt {
						line-height: 40rpx;
						font-size: 28rpx;
						color: #333;
						font-weight: 500;
					}
				}
				
				.icon {
					position: absolute !important;
					width: 30rpx;
					height: 36rpx;
					display: block;
				}
				
				.level-left,
				.level-right {
					width: 36rpx;
					height: 30rpx;
				}
				
				.vertical {
					top: 150%;
				}
			}
			
			.process-item:first-child .item:first-child {
				height: auto;
				height: 120rpx;
				background-color: rgba(#E6201A, .04);
				
				.txt {
					color: #E6201A;
					font-size: 28rpx;
					font-weight: 500;
				}
			}
			
			.process-item:last-child {
				margin-bottom: 0;
				
				.vertical {
					display: none;
				}
				
				.level-left,
				.level-right {
					display: none;
				}
				
				.item:nth-of-type(2)~.level-left,
				.item:nth-of-type(2)~.level-right {
					display: block;
				}
			}
			
			.process-item:nth-of-type(odd) {
				flex-direction: row;
				
				.level-left,
				.level-right {
					left: 50%;
					transform: translateX(-50%);
				}
				
				.level-left {
					display: none;
				}
				
				.vertical {
					right: 142rpx;
					transform: translate(50%, -50%);
				}
			}
			
			.process-item:nth-of-type(even) {
				flex-direction: row-reverse;
				
				.level-left,
				.level-right {
					right: 50%;
					transform: translateX(50%);
				}
				
				.level-right {
					display: none;
				}
				
				.vertical {
					left: 142rpx;
					transform: translate(-50%, -50%);
				}
			}
		}
	}
</style>
